<style lang="scss" scoped>
    .ui-banner-item{
        overflow: hidden;
        flex:1;
        .ui-img{
            width: 100%;
            height: 100%;
            transition: .3s;
            transform-origin: center;
            &:hover{
                transform: scale3d(1.1,1.1,1);
            }
        }
        // banner
        .el-carousel__item h3 {
            color: #475669;
            font-size: 18px;
            opacity: 0.75;
            margin: 0;
        }
        .el-carousel__item:nth-child(2n) {
            background-color: #99a9bf;
        }
        .el-carousel__item:nth-child(2n+1) {
            background-color: #d3dce6;
        }

        .top-img-small{
            width: 312.5px;
            height: 100%;
        }
        .top-img{
            width: 635px;
            height: 100%;
        }
    }

</style>
<template>
    <div class="flex mb10 ui-center-width" style="height:400px">
        <div class="ui-banner-item mr5">
            <!-- banner -->
            <el-carousel indicator-position="none" height="400px">
                <el-carousel-item v-for="item in banner" :key="item.slide_id">
                    <a :href="item.slide_url">
                        <ui-img :url="item.slide_pic"></ui-img>
                    </a>
                </el-carousel-item>
            </el-carousel>
        </div>
        <div v-if="imgs.length>0" class="flex-1 flex column ml5">
            <div class="flex flex-1 mb5">
                <div class="ui-banner-item mr5">
                    <ui-img v-if="imgs[0]" :url="imgs[0].cover"  @click.native="link(imgs[0].id)" class="top-img-small cursor-pointer"></ui-img>
                </div>
                <div class="ui-banner-item ml5">
                    <ui-img v-if="imgs[1]" :url="imgs[1].cover"  @click.native="link(imgs[1].id)" class="top-img-small cursor-pointer"></ui-img>
                </div>
            </div>
            <div class="ui-banner-item mt5">
                <ui-img v-if="imgs[2]" :url="imgs[2].cover" @click.native="link(imgs[2].id)" class="top-img cursor-pointer"></ui-img>
                <div v-else>暂无推荐</div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        props:['banner','imgs'],
        methods:{
            link(id){
                this.$router.push({
                    name:'文章详情',
                    query:{
                        id:id
                    }
                })
            }
        },
    }
</script>